<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <th:block th:replace="reader/common :: heads"></th:block>
</head>
<body>

<th:block th:replace="reader/common :: navbar"></th:block>

<main class="page product-page">
    <section class="clean-block clean-product dark">
        <div class="container">
            <div class="block-heading"></div>
            <div class="block-content">
                <div class="product-info">
                    <div class="row" style="height:210px;">
                        <div style="width:371px;" class="col-3"><img id="avatar" src="assets/img/avatar_2x.png"></div>
                        <div style="width:517px;" class="col-7 d-flex">
                            <div class="info">
                                <h3 style="font-style: normal;font-weight: 600;" id="oriUsername" th:text="${reader.getName()}">
                                    Tanglizi</h3>
                                <br>
                                <table>
                                    <tbody>
                                    <tr>
                                        <td style="padding-right: 20px;">
                                            <h5 class="text-muted">Email:</h5></td>
                                        <td><h5 class="text-muted" th:text="${reader.getEmail()}">
                                            tanglizimail@foxmail.com</h5>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td><h5 class="text-muted">Phone: </h5></td>
                                        <td><h5 class="text-muted" th:text="${reader.getPhoneNumber()}">18681941719</h5>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <br>
                                <h5 class="text-danger" th:if="${fine}>0.1">Fine: $ [[${fine}]]</h5></div>
                        </div>
                        <div style="width:371px;" class="col-2">
                            <button id="logout-btn" class="btn btn-primary">Logout</button>
                        </div>
                    </div>
                </div>

                <div class="product-info">
                    <div>
                        <ul class="nav nav-tabs" id="myTab">
                            <li class="nav-item"><a class="nav-link active show" role="tab" data-toggle="tab"
                                                    href="#reviews" id="reviews-tab" aria-selected="true">Borrowing history</a></li>
                            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" aria-selected="false" href="#tab-2">Reserving history</a></li>
                            <li class="nav-item"><a class="nav-link" role="tab" data-toggle="tab" href="#tab-3"
                                                    aria-selected="false">Modify information</a></li>
                        </ul>
                        <div class="tab-content" id="myTabContent" style="margin:40px;">
                            <div class="tab-pane fade active show" role="tabpanel" id="reviews">
                                <div class="reviews">
                                    <div id="history-body">
                                        <table class="table table-hover">
                                            <tbody>
                                            <tr th:each="borrowingHist: ${borrowingHistories}">
                                                <td>
                                                    <div class="review-item" style="width: 100%;margin-bottom: 0px;">
                                                        <div class="row">
                                                            <div class="col-3"><img class="rounded img-fluid" th:src="${borrowingHist.getBook().getBookDescription().getCoverUrl()} + '?token=GroupA3'">
                                                            </div>
                                                            <div class="col-9">
                                                                <h4 style="font-size:27px;" th:text="${borrowingHist.getBook().getBookDescription().getTitle()}">Computer Networking</h4>
                                                                <span class="text-muted" style="font-size:18px;"></span>
                                                                <span style="text-decoration: underline;" class="text text-warning" th:text="'BookId: ' + ${borrowingHist.getBook().getBookId()}"></span>
                                                                <br>
                                                                <h5 class="text-muted" th:text="${borrowingHist.getBook().getBookDescription().getAuthor()}">John Smith / Rose</h5>
                                                                <h5 class="text-muted" th:text="${borrowingHist.getBook().getBookDescription().getPublisher()} + ' '+ ${borrowingHist.getBook().getBookDescription().getPublishYear()}">Pearson 2012</h5>
                                                                <h3 class="text-danger" th:text="${borrowingHist.getBook().getBookDescription().getPrice()}">¥100</h3>

                                                                <span th:text="${borrowingHist.getBook().getBookDescription().getLocation()}">Floor 2 - Shelf 3</span><br>

                                                                <span>ISBN: [[${borrowingHist.getBook().getBookDescription().getISBN()}]]</span></div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane mx-auto" role="tabpanel" id="tab-2" style="">
                                <div class="reviews">
                                    <div id="history2-body">
                                        <table class="table table-hover">
                                            <tbody>
                                            <tr th:each="borrowingHist: ${reservingHistories}">
                                                <td>
                                                    <div class="review-item" style="width: 100%;margin-bottom: 0px;">
                                                        <div class="row">
                                                            <div class="col-3"><img class="rounded img-fluid" th:src="${borrowingHist.getBook().getBookDescription().getCoverUrl()} + '?token=GroupA3'">
                                                            </div>
                                                            <div class="col-9">
                                                                <h4 style="font-size:27px;" th:text="${borrowingHist.getBook().getBookDescription().getTitle()}">Computer Networking</h4>
                                                                <span class="text-muted" style="font-size:18px;"></span>
                                                                <span style="text-decoration: underline;" class="text text-warning" th:text="'BookId: ' + ${borrowingHist.getBook().getBookId()}"></span>
                                                                <br>
                                                                <h5 class="text-muted" th:text="${borrowingHist.getBook().getBookDescription().getAuthor()}">John Smith / Rose</h5>
                                                                <h5 class="text-muted" th:text="${borrowingHist.getBook().getBookDescription().getPublisher()} + ' '+ ${borrowingHist.getBook().getBookDescription().getPublishYear()}">Pearson 2012</h5>
                                                                <h3 class="text-danger" th:text="${borrowingHist.getBook().getBookDescription().getPrice()}">¥100</h3>

                                                                <span th:text="${borrowingHist.getBook().getBookDescription().getLocation()}">Floor 2 - Shelf 3</span><br>

                                                                <span>ISBN: [[${borrowingHist.getBook().getBookDescription().getISBN()}]]</span></div>
                                                        </div>
                                                    </div>
                                                </td>
                                            </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="tab-pane mx-auto" role="tabpanel" id="tab-3" style="">
                                <div class="container">
                                    <div class="row">
                                        <div class="col-2"></div>
                                        <div class="col-8">
                                            <div class="form-horizontal">
                                                <div class="form-group row">
                                                    <label class="col-sm-3 form-control-label">Username</label>
                                                    <div class="col-sm-9">
                                                        <input id="username" class="form-control" th:value="${reader.getName()}" type="text">

                                                    </div>
                                                </div>
                                                <div class="line"></div>
                                                <div class="form-group row">
                                                    <label class="col-sm-3 form-control-label">Email</label>
                                                    <div class="col-sm-9">
                                                        <input id="email" class="form-control" type="email" th:value="${reader.getEmail()}" />

                                                    </div>
                                                </div>
                                                <div class="line"></div>
                                                <div class="form-group row">
                                                    <label class="col-sm-3 form-control-label">Phone</label>
                                                    <div class="col-sm-9">
                                                        <input id="phoneNumber" type="number" class="form-control"  th:value="${reader.getPhoneNumber()}">

                                                    </div>
                                                </div>

                                                <div class="line"></div>
                                                <div class="form-group row">
                                                    <label class="col-sm-3 form-control-label">New Password</label>
                                                    <div class="col-sm-9">
                                                        <input id="newPassword" class="form-control" type="password">
                                                        <small class="help-block-none">If do not want to change
                                                            password, please keep it empty.</small>

                                                    </div>
                                                </div>
                                                <div class="line"></div>
                                                <div class="line"></div>
                                                <br>
                                                <div class="form-group row">
                                                    <label class="col-sm-3 form-control-label">Original Password</label>
                                                    <div class="col-sm-9">
                                                        <input id="oriPassword" class="form-control" value="" type="password">
                                                    </div>
                                                </div>
                                                <div class="line"></div>
                                                <div class="form-group row">
                                                    <div class="col-sm-4 offset-sm-3">
                                                        <button id="submit" class="btn btn-primary" >Save changes</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-2"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

<th:block th:replace="reader/common :: footer"></th:block>
<th:block th:replace="reader/common :: scripts"></th:block>

<script>
    $("#avatar").attr("src", get_identicon($("#oriUsername").text(), 200));

    $("#logout-btn").bind("click", function () {
        $.ajax({
            url: "/api/user/token",
            method: "DELETE",
            success: function (resp) {
                window.location.href="/reader/index";
            }
        })
    })
</script>

</body>
</html>